<template>
    <div>
        <Button style="margin:0 10px 10px 0" type="primary" @click="changeType">切换分类</Button>
        <Button style="margin:0 10px 10px 0" @click="appearTabOne" type="primary">添加</Button>
        <Button style="margin:0 10px 10px 0" @click="appearTabTwo" type="primary">修改</Button>
        <Button style="margin:0 10px 10px 0" @click="removeCate" type="error">删除</Button>
        <hr style="border-top:1px solid #bbb">
        <Tree :data="tree" @on-select-change="checkBox" style="position:absolute;top:70px;left:25px;"></Tree>
        <Modal
            v-model="cateAdd"
            title="添加分类框"
            >
            <!--在弹出框里面再加一个表单，用于添加分类的书写-->
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                <FormItem label="分类名称" prop="title">
                    <Input v-model="formValidate.title"/></Input>
                </FormItem>  
            </Form>
            <div slot="footer">
                <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
   export default {
       data(){
           return {
                tree: [],
                num:1,//切换分类
                cateAdd:false,
                id:"",
                title:"",
                bstop:false,
                formValidate: {
                    title:"",
                    parentId:"",
                    expand:true,
                    type:0
                },
                ruleValidate: {
                    name: [
                        { required: true, message: '标题不能为空', trigger: 'blur' }
                    ],
                },
           }
       },
        methods:{
            //点击分类是需要获取的数据
            checkBox(ev){
                this.formValidate.parentId = ev[0].parentId;//parentId和type是用于添加
                this.formValidate.type = ev[0].type;
                this.id = ev[0]._id;//获取id用于删除
                this.title = ev[0].title;//获取标题用于修改
                //console.log(ev[0].title)
            },
            //添加分类
            appearTabOne(){
                if(this.formValidate.parentId!=""){
                    this.cateAdd = true;
                }else{
                    this.$Message.info('请选择要添加的分类');
                }
            },
            //修改分类
            appearTabTwo(){
                if(this.title!=""){
                    this.cateAdd = true;
                    this.bstop = true;
                    this.formValidate.title = this.title;
                }else{
                    this.$Message.info('请选择要修改的分类');
                }
            },
            //添加分类
           handleSubmit (info) {
            this.$refs[info].validate((valid) => {
                //console.log(this.formValidate);
                if (valid) {
                    if(this.bstop){
                        fetch(`http://localhost:3000/cate/data/${this.id}`,{
                            method:'put',
                            headers:{
                                'Content-Type':'application/json'
                            },
                            body:JSON.stringify(this.formValidate)
                        }).then(res=>{
                            return res.json();
                        }).then(data=>{
                            this.getTree();
                            this.$Message.success('修改成功!');
                            this.cateAdd = false;     
                            this.formValidate.parentId = "";
                            this.id = "";
                            this.title="";                     
                        });
                    }else{
                        fetch('http://localhost:3000/cate/data',{
                            method:'post',
                            headers:{
                                'Content-Type':'application/json'
                            },
                            body:JSON.stringify(this.formValidate)
                        }).then(res=>{
                            return res.json();
                        }).then(data=>{
                            this.getTree();
                            this.$Message.success('添加成功!');
                            this.cateAdd = false;//关闭添加分类的弹框
                            this.formValidate.parentId = "";
                            this.id = "";
                            this.title="";
                        });
                    }
                        
                }else {
                    this.$Message.error('添加失败!');
                }
            })
        },
        handleReset (info) {
            this.$refs[info].resetFields();
        },
        
        //删除分类
        removeCate(){
            if(this.id != ""){
                this.$Modal.confirm({
                    title: '删除确认对话框',
                    content: '<p>是否确认删除该条信息？</p>',
                    onOk: () => {
                        fetch(`http://localhost:3000/cate/data/${this.id}`,{
                         method:'delete',
                        }).then(res=>{
                            return res.json();
                        }).then(data=>{
                            this.$Message.info('已删除');
                            this.getTree();
                            this.formValidate.parentId = "";
                            this.id = "";
                            this.title = "";
                        });   
                    },
                    onCancel: () => {
                        this.$Message.info('已取消删除');
                    }
                });
            }else{
                this.$Message.info('请选择要删除的分类');
            }
            
        },
        
        //切换分类
        changeType(){
            this.num++;
            if(this.num>3){
                this.num = 1;
            };
            this.getTree();
        },
        //获取树结构
        getTree(){
            fetch(`http://localhost:3000/cate/list/${this.num}`,{
                method:'get',
                headers:{
                     "Content-Type":"application/json"
                },
        }).then(res=>{
            return res.json();
                }).then(data=>{
                    this.tree = data;
                    //console.log(data)
                })
            },
       },
       created(){
           this.getTree()
       }
   }
</script>
